import './index.css'
// import Swiper from "swiper";
import "swiper/swiper-bundle.css";
import lunbo from "./img/lb.png"
import lunbo1 from "./img/lb1.png"
import { Swiper,SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 
// 引入 Swiper 样式
// import 'swiper/swiper.scss';
// import 'swiper/components/navigation/navigation.scss';
// import 'swiper/components/pagination/pagination.scss';
// import 'swiper/components/scrollbar/scrollbar.scss';
 
// 安装 Swiper 组件
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
// function componentDidmount(){
//     new Swiper ('.swiper-container', {
//         direction: 'vertical', // 垂直切换选项
//         loop: true, // 循环模式选项
//         default:0,
//         default:300,
//         // 如果需要分页器
//         pagination: {
//             el: '.swiper-pagination',
//         },
//         // 如果需要前进后退按钮
//         navigation: {
//         nextEl: '.swiper-button-next',
//         prevEl: '.swiper-button-prev',
//         },
//         // 如果需要滚动条
//         scrollbar: {
//         el: '.swiper-scrollbar',
//         },
//     })              
//  }
const KLunbo = () => {
    // componentDidmount()
    return  (
    // <div className="swiper-container">
    //      <div className="swiper-wrapper">
    //          <div className="swiper-slide">
    //              <img src={lunbo}/>
    //          </div>
    //          <div className="swiper-slide">
    //              <img src={lunbo1}/>
    //          </div>
    //          <div className="swiper-slide">
    //              <img src={lunbo1}/>
    //          </div>
    //      </div>
    //      <div className="swiper-pagination"></div>
         
    //      <div className="swiper-button-prev"></div>
    //      <div className="swiper-button-next"></div>
         
    //      <div className="swiper-scrollbar"></div>
    //  </div>
    <div className="lb-up">
            <Swiper
            spaceBetween={750}
            slidesPerView={2}
            loop={true}
            // default={true}
            // navigation
            pagination={{ clickable: true }}
            onSwiper={(swiper) => console.log(swiper)}
            onSlideChange={() => console.log('slide change')}
            >
            <SwiperSlide className="bb">
                <img src={lunbo1}/>
            </SwiperSlide>
            <SwiperSlide>
                <img src={lunbo}/>
            </SwiperSlide>
            <SwiperSlide>
                <img src={lunbo}/>
            </SwiperSlide>
        </Swiper>
    </div>
    )
  };

  
export default KLunbo;